/**
 * Author: Shen Yanqiu
 * Date: 2017-12-14
 * Time: 19:21
 *
 */
import React from 'react';
import { Progress, Icon } from 'antd';
import styles from './ShowUploadInfo.less';

class ShowUploadInfo extends React.Component {
  state={
    showInfoBlock: true,
    infoBlockScroll: 0,
    filelist: [],
  };
  // 点击关闭进度框
  closeInfo = () => {
    this.setState({
      showInfoBlock: false,
    });
    // console.log(this.refs.showInfoBlock);
  };
  componentWillReceiveProps (nextProps) {
    // 当还有上传列表是显示进度框，当没有上传的文件时候进度框滑动到底部
    if (nextProps.fileList.length !== 0) {
      const arr = nextProps.fileList.filter((item) => {
        return item.percent !== 100;
      });
      if (arr.length !== 0) {
        this.infoBlock && (this.infoBlock.scrollTop);
      } else {
        this.infoBlock && (this.infoBlock.scrollTop = this.infoBlock.scrollHeight + 50);
      }
      if (nextProps.fileList !== this.state.filelist) {
        this.setState({
          filelist: nextProps.fileList,
          showInfoBlock: true,
        });
      }
    }
  }
  render () {
    const { showInfoBlock } = this.state;
    const { fileList } = this.props;
    return (
      <div>
        {
          fileList.length !== 0 ?
            <div className={showInfoBlock ? styles.showBlock : styles.hideInfoBlock}>
              <Icon type="close" className={styles.closeIcon} onClick={this.closeInfo} />
              <div className={styles.showInfo} ref={(info) => { this.infoBlock = info; }}>
                {
                  fileList.length !== 0 ? fileList.map((item, index) => (
                    <div key={index}>
                      {item.name}
                      {
                        item.status === "error" ? <div>上传失败<Progress percent={100} status={"exception"} /></div> : <Progress key={index} percent={parseInt(item.percent)} />
                      }
                    </div>
                  )) : ''
                }
              </div>
            </div>
            :
            ''
        }
      </div>
    );
  }
}
export default ShowUploadInfo;
